其他
如何创建与框架无关的JavaScript插件
构建库时要记住的事项
您应该对插件有一个目标——这是插件要实现的关键 您的插件应易于使用以达到预期用途 您的插件应在很大程度上可定制 您的插件应该有一个文档,指导将要使用该插件的开发人员
现在,让我们着眼于上述几点。
我们将创造什么
.next()
和 .prev()
起步
TooSlidePlugin
。tooSlide.js
。var slider = new ToolSidePlugin({
slideClass: ".singleSlide",
container: ".slideContainer",
nextButton: ".next",
previousButton: ".prev"
})
TooSlides
的构造函数,该构造函数接收具有某些属性的对象作为参数。对象的属性是 slidesClass
、container
、nextButton
和 previousButton
,这些是我们希望用户能够自定义的属性。function ToolSidePlugin() {
}
Options
TooSlides
需要一个选项参数,所以我们会定义一些默认的属性,这样如果我们的用户没有指定自己的属性,就会使用默认的属性。function ToolSidePlugin(options) {
let defaultOptions = {
slideClass: ".singleSlide",
container: ".slideContainer",
nextButton: ".nextSlide",
previousButton: ".previousSlide"
}
options = { ...defaultOptions, ...options};
let _this = this;
let slides = [];
let currentSlideIdex = 0;
}
defaultOptions
对象来保存一些属性,我们还使用JavaScript扩展操作符将传入的选项与默认选项合并。我们将 this
分配给另一个变量,因此我们仍然可以在内部函数中对其进行访问。slides
,它将保存所有我们想要用作幻灯片的图片,以及 currentSlideIndex
,它保存当前正在显示的幻灯片的索引。this.prepareControls = function() {
const nextButton = document.createElement("button");
const previousButton = document.createElement("button");
nextButton.setAttribute("class", "next");
nextButton.InnerHTML = "Next";
previousButton.setAttribute("class", "prev");
nextButton.InnerHTML = "Prev";
let controleContainer = document.createElement("div");
controleContainer.setAttribute("class", "too-slide-control-container");
controleContainer.appendChild(previousButton);
controleContainer.appendChild(nextButton);
document.querySelector(options.container).appendChild(controleContainer);
nextButton.addEventListener("click", function() {
_this.next();
});
previousButton.addEventListener("click", function() {
_this.previous();
});
}
.prepareControls()
方法中,我们创建了一个容器DOM元素来保存控件按钮,我们自己创建了下一个和上一个按钮,并将它们附加到 controlContainer
。.next()
和 .previous()
方法。别担心,我们很快就会创建这些方法。.goToSlide()
和 .hideOtherSlides()
。this.goToSlide = function(index) {
this.hideOtherSlides();
if(index > slides.length - 1) {
index = 0;
}
if(index < 0) {
index = slides.length - 1;
}
slides[index].style = "display:block";
currentSlideIndex = index;
}
this.hideOtherSlides = function() {
document.querySelectorAll(options.slidesClass).forEach((slide, index) => {
slides[index].style = "display: none"
})
}
.goToSlide()
方法采用参数 index
,这是我们要显示的幻灯片的索引,此方法首先隐藏当前正在显示的任何幻灯片,然后仅显示我们要显示的幻灯片。.next()
和 .previous()
辅助方法,分别帮助我们向前一步,或者向后一步(还记得我们之前附加的事件监听器吗?this.next = function() {
this.goToSlide(currentSlideIndex + 1);
}
this.previous = function() {
this.goToSlide(currentSlideIndex - 1);
}
.goToSlide()
方法,并将 currentSlideIndex
移动 1。.init()
方法,该方法将在实例化构造函数时帮助我们进行设置。this.init = function() {
document.querySelectorAll(options.container).className += " too-slide-slider-container";
document.querySelectorAll(options.slidesClass).forEach((slide, index) => {
slides[index] = index;
slides[index].style = "display:none";
slides[index].className = " too-slide-single-slide too-slide-fade";
});
this.goToSlide(0);
this.prepareControls();
}
.init()
方法获取所有幻灯片图像并将其存储在我们之前声明的 slides
数组中,并默认隐藏所有图像。.goToSlide(0)
方法显示幻灯片中的第一张图像,并且还通过调用 .prepareControls()
设置我们的控制按钮。.init()
方法,这样每当构造函数被初始化时,.init()
方法总是被调用。function ToolSidePlugin(options) {
let defaultOptions = {
slidesClass: ".singleSlide",
container: ".slideContainer",
nextButton: ".nextSlide",
previousButton: ".previousSlide"
}
options = { ...defaultOptions, ...options};
let _this = this;
let slides = [];
let currentSlideIdex = 0;
this.init = function() {
document.querySelectorAll(options.container).className += " too-slide-slider-container";
document.querySelectorAll(options.slidesClass).forEach((slide, index) => {
slides[index] = index;
slides[index].style = "display:none";
slides[index].className = " too-slide-single-slide too-slide-fade";
});
this.goToSlide(0);
this.prepareControls();
}
this.prepareControls = function() {
const nextButton = document.createElement("button");
const previousButton = document.createElement("button");
nextButton.setAttribute("class", "next");
nextButton.InnerHTML = "Next";
previousButton.setAttribute("class", "prev");
nextButton.InnerHTML = "Prev";
let controleContainer = document.createElement("div");
controleContainer.setAttribute("class", "too-slide-control-container");
controleContainer.appendChild(previousButton);
controleContainer.appendChild(nextButton);
document.querySelector(options.container).appendChild(controleContainer);
nextButton.addEventListener("click", function() {
_this.next();
});
previousButton.addEventListener("click", function() {
_this.previous();
});
}
this.goToSlide = function(index) {
this.hideOtherSlides();
if(index > slides.length - 1) {
index = 0;
}
if(index < 0) {
index = slides.length - 1;
}
slides[index].style = "display:block";
currentSlideIndex = index;
}
this.hideOtherSlides = function() {
document.querySelectorAll(options.slidesClass).forEach((slide, index) => {
slides[index].style = "display: none"
})
}
this.next = function() {
this.goToSlide(currentSlideIndex + 1);
}
this.previous = function() {
this.goToSlide(currentSlideIndex - 1);
}
this.init();
}
添加CSS
tooSlide.css
。* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0; padding: 30px;}
.too-slide-single-slide {
display: none;
max-height: 100%;
width: 100%;
}
.too-slide-single-slide img{
height: 100%;
width: 100%;
}
img {vertical-align: middle;}
/* Slideshow container */
.too-slide-slider-container {
width: 100%;
max-width: 100%;
position: relative;
margin: auto;
height: 400px;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 10px;
margin-right: 15px;
margin-left: 15px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
border-style: unset;
background-color: blue;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.too-slide-fade {
-webkit-animation-name: too-slide-fade;
-webkit-animation-duration: 1.5s;
animation-name: too-slide-fade;
animation-duration: 1.5s;
}
@-webkit-keyframes too-slide-fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes too-slide-fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
测试我们的插件
index.html
。我们还将添加4张图片用作幻灯片,所有图片都与我们的插件JavaScript代码位于同一目录中。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试幻灯片</title>
<link rel="stylesheet" href="tooSlide.css">
</head>
<body>
<div class="contaoner">
<div class="slideContainer">
<div class="singleSlide"><img src="slide1.png" alt="slide1" class="slideImage"></div>
<div class="singleSlide"><img src="slide2.png" alt="slide2" class="slideImage"></div>
<div class="singleSlide"><img src="slide3.png" alt="slide3" class="slideImage"></div>
<div class="singleSlide"><img src="slide4.png" alt="slide4" class="slideImage"></div>
</div>
</div>
<script src="tooSlide.js"></script>
<script>
var slider = new ToolSidePlugin({
slideClass: ".singleSlide",
container: ".slideContainer",
nextButton: ".next",
previousButton: ".prev"
})
</script>
</body>
</html>
tooSlide.css
文件,而在文件的末尾,我调用了 tooSlide.js
文件。var slider = new ToolSidePlugin({
slideClass: ".singleSlide",
container: ".slideContainer",
nextButton: ".next",
previousButton: ".prev"
})
最后的效果:
为您的JavaScript项目编写文档
文档是你教人们如何使用你的插件。因此,它需要你花一些心思。
对于我们新创建的插件,我将从在项目目录中创建README.md文件开始。
发布你的插件
在编写了您的插件之后,您很可能希望其他开发人员从您的新创建中受益,因此我将向您展示如何做到这一点。
你可以通过两种方式让你的插件对其他人可用:
在Github上托管它,当您这样做时,任何人都可以下载仓库,包括文件(.js和.css),并立即使用您的插件。 发布在npm上,请查看官方的npm文档来指导您。
就是这样。
结束
原文:https://blog.logrocket.com/how-to-create-a-framework-agnostic-javascript-plugin/
作者:Sodeeq Elusoji
更多文章
我不能没有的5个Vue.js库 TypeScript和Nodemon终极设置! cURL简介:高级程序员都在用的工具 8个JavaScript库可更好地处理本地存储 引入适用于双屏和可折叠设备的Web API 听说你熟练使用Vue.js,这9种Vue技术你掌握了吗? 在Vue Vite应用程序中实现暗/亮模式 2020 开发人员生态系统现状
粉丝福利 120期留言中奖用户:小淘气,恭喜!请找我领红包,过期不候。 临走前留下,今天的福利 福利1:《Node.js网络爬虫开发2019新版》视频教程 获取地址请在公众号对话框中回复关键字:004 福利2:在看+留言,张张会在留言区随机抽取一位认真留言的小伙伴,给他发一个红包奖励
- END -
走心的分享更容易被抽中~
开奖时间 下期文末
点赞 + 在看 + 留言
下一个幸运儿就是你
👇